<template>
	<div class="app-container">
		<el-form :inline="true" label-width="5rem" :model="searchFrom" class="demo-form-inline">
			<el-form-item v-if="moreSearch" :label="$t('system.msg.msgSender')">
				<el-input v-model="searchFrom.msgSender" :placeholder="$t('system.msg.msgSender')"></el-input>
			</el-form-item>
			<el-form-item v-if="moreSearch" :label="$t('system.msg.msgTitle')">
				<el-input v-model="searchFrom.msgTitle" :placeholder="$t('system.msg.msgTitle')"></el-input>
			</el-form-item>
			<el-form-item v-if="moreSearch" :label="$t('system.msg.msgContent')">
				<el-input v-model="searchFrom.msgContent" :placeholder="$t('system.msg.msgContent')"></el-input>
			</el-form-item>
			<el-form-item style="float: right;">
				<el-button type="primary" icon="el-icon-search" @click="getList">{{$t('common.queryBtn')}}</el-button>
				<el-button type="primary"  @click="addMsg"><i
						class="el-icon-plus" />{{$t('common.addBtn')}}</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
			<el-table-column v-for="item in tableColumn" :key="item.field" align="center" :label="item.title"
				:width="item.width">
				<template slot-scope="{row}">
					<template v-if="item.type == 'select'">
						<span>{{ translation[item.field][row[item.field]] }}</span>
					</template>
					<template>
						<span>{{ row[item.field] }}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column :label="$t('common.operation')">
				<template slot-scope="scope">
					<el-button  icon="el-icon-edit" type="primary" size="mini"
						@click="editMsg(scope.$index, scope.row)">{{$t('common.editBtn')}}</el-button>
					<el-button  icon="el-icon-delete" size="mini" type="danger"
						@click="deleteMsg(scope.$index, scope.row)">{{$t('common.delBtn')}}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="pageSizeChange" @current-change="currentPageChange"
			:current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="page.total" background>
		</el-pagination>
		<el-dialog width="1200px" :visible.sync="msgAddFormVisible" center>
			<div slot="title" class="dialog-title">
				<div class="dialog-header">
					{{$t('system.msg.msgInfo')}}
				</div>
			</div>
			<msgEdit ref="msgEdit" :msgInfo="msgInfo" />
			<div slot="footer" class="dialog-footer" style="border-top: 1px solid #dfe6ec ;">
				<div class="dialog-btn-top">
					<el-button type="danger" icon="el-icon-close" @click="msgAddFormVisible = false">
						{{$t('common.cancelBtn')}}</el-button>
					<el-button icon="el-icon-check" type="primary" @click="save">{{$t('common.saveBtn')}}</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import request from '@/utils/request'
	import permission from '@/directive/permission/index.js' // 权限判断指令
	import msgEdit from '@/views/system/msg/msg-edit.vue'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		name: 'msgList',
		components: {
			msgEdit
		},
		directives: {
			permission
		},
		data() {
			return {
				//更多检索条件
				moreSearch: true,
				//弹窗是否可见
				msgAddFormVisible: false,
				//搜索表单
				searchFrom: {
					pageNo: 1,
					pageSize: 10
				},
				//表的下拉数据
				tableList: [],
				//正在编辑的用户信息
				msgInfo: {
					msgType: "",
					msgSender: "",
					msgReceiver: "",
					msgCode: "",
					msgTitle: "",
					msgContent: "",
					msgStatus: "",
					msgContentHtml: "",
				},
				//表头
				tableColumn: [
					{
						field: 'msgCode',
						title: this.$t("system.msg.msgCode"),
					},
					{
						field: 'msgSender',
						title: this.$t("system.msg.msgSender"),
					},

					{
						field: 'msgTitle',
						title: this.$t("system.msg.msgTitle"),
					},
					{
						field: 'msgStatus',
						title: this.$t("system.msg.msgStatus"),
						type: 'select'
					}
				],
				//数据转译
				translation: {
					msgType: {},
					msgStatus: {},
				},
				//所有的下拉选项
				options: {
					msgType: [],
					msgStatus: [],
				},
				//查询方式列表
				listLoading: false,
				//数据列表
				list: null,
				//分页相关参数
				page: {
					pageSizes: [10, 20, 50, 100],
					pageSize: 10,
					total: 0,
					currentPage: 1
				},
				socket : null
			}
		},
		//页面初始化加载
		created() {
			this.getList();
			this.getMsgType();
			this.getMsgStatus();
			
		},
		methods: {
			//查询列表
			getList() {
				this.searchFrom['pageNo'] = this.page.currentPage
				this.searchFrom['pageSize'] = this.page.pageSize
				request({
					url: '/system/msg/queryByUser',
					method: 'post',
					data: this.searchFrom
				}).then(response => {
					this.list = response.data.list
					this.page.total = response.data.total
					this.page.currentPage = response.data.pageNum
				})
			},

			//保存用户信息
			save() {
				var html = this.$refs.msgEdit.getHtml();
				var url = '/system/msg/insert';
				if (this.msgInfo.msgId) {
					url = '/system/msg/update';
				}
				debugger
				this.msgInfo.msgType = this.msgInfo.msgTypeArr.toString();
				this.msgInfo.msgReceiver = this.msgInfo.msgReceiverArr.toString();
				this.msgInfo.msgContentHtml = html;
				request({
					url: url,
					method: 'post',
					data: this.msgInfo
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.msgAddFormVisible = false;
				})
			},
			//添加
			addMsg() {
				this.msgInfo = {
					msgType: "",
					msgSender: "",
					msgReceiver: "",
					msgCode: "",
					msgTitle: "",
					msgContent: "",
					msgStatus: "",
					msgContentHtml: "",
				}
				this.msgAddFormVisible = true;
			},
			//编辑
			editMsg(index, row) {
				this.msgInfo = {
					msgType: "",
					msgSender: "",
					msgReceiver: "",
					msgCode: "",
					msgTitle: "",
					msgContent: "",
					msgStatus: "",
					msgContentHtml: "",
				}
				this.msgInfo = row;
				this.msgInfo.msgTypeArr = this.msgInfo.msgType.split(",");
				this.msgInfo.msgReceiverArr = this.msgInfo.msgReceiver.split(",");
				this.msgAddFormVisible = true;
			},
			//删除用户
			deleteMsg(index, row) {
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.confirmDelete(row)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//确认删除操作
			confirmDelete(row) {
				var url = '/system/msg/delete';
				request({
					url: url,
					method: 'post',
					data: row
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.msgAddFormVisible = false;
				})
			},
			//分页数量修改
			pageSizeChange(pageSize) {
				this.page.pageSize = pageSize;
				this.getList();
			},
			//页码修改
			currentPageChange(page) {
				this.page.currentPage = page;
				this.getList();
			},
			//更多查询条件
			moreChange() {
				this.searchFrom["msgId"] = null;
				this.searchFrom["msgType"] = null;
				this.searchFrom["msgSender"] = null;
				this.searchFrom["msgReceiver"] = null;
				this.searchFrom["msgCode"] = null;
				this.searchFrom["msgTitle"] = null;
				this.searchFrom["msgContent"] = null;
				this.searchFrom["msgStatus"] = null;
				this.searchFrom["msgContentHtml"] = null;
			},
			getMsgType() {
				request({
					url: '/system/dict/queryByForm?dictGroupKey=msgType',
					method: 'post'
				}).then(response => {
					this.options["msgType"] = response.data;
					for (var i = 0; i < this.options["msgType"].length; i++) {
						this.translation["msgType"][this.options["msgType"][i].dictKey] = this.options["msgType"][
							i].dictValue
					}
				})
			},
			getMsgStatus() {
				request({
					url: '/system/dict/queryByForm?dictGroupKey=msgStatus',
					method: 'post'
				}).then(response => {
					this.options["msgStatus"] = response.data;
					for (var i = 0; i < this.options["msgStatus"].length; i++) {
						this.translation["msgStatus"][this.options["msgStatus"][i].dictKey] = this.options[
							"msgStatus"][i].dictValue
					}
				})
			},
		}
	}
</script>
